<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>模拟登录</title>
</head>
<style>
    el-input {
        width: 200px;
    }

    #div1 {
        width: 200px;
    }
</style>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--jsencrypt 加密插件-->
<script src="https://cdn.bootcdn.net/ajax/libs/jsencrypt/3.2.1/jsencrypt.min.js"></script>
<!--http 请求插件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>


<div id="app">
    <div id="div1">
        <label>账号：</label>
        <el-input v-model="account" placeholder="请输入账号"></el-input>
        <label>密码：</label>
        <el-input v-model="pwd" placeholder="请输入密码"></el-input>
        <el-button type="primary" @click="login()">登录</el-button>
    </div>

</div>

<script>
    new Vue({
        el: '#app',
        data: {
            rsaPublicKey: 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC_F5UQC1QWsu3QsESQBz9M-GDA9Atm0qVSvwIsy568lyRLi-nq3VvvnmgrlL4yTbngFzyfb2Dn35cNCHsBvIaGuCY3_PpzPqMzVpxr2QlEkhEX9atnJQ1rWexS8QeZtPjpiIwoQrChTzXjD_sYUkDrqSykFplyivf0NSO2WqCBdwIDAQAB',
            account: '',
            pwd: ''
        },
        methods: {
            login: function () {
                var data = {
                    account: this.account,
                    pwd: this.pwd
                };
                var json = JSON.stringify(data);
                var cipher = this.encryptByPublicKey(json);
                console.log("密文 ：" + cipher);
                var url = "http://localhost:8089/user/login";
                axios.post(url, {
                    encryptedData: cipher,
                })
                    .then(function (response) {
                        var data = response.data;
                        if (data.code == 200) {
                            //中文需要进行两次encodeURI转码( encodeURI:把URI字符串采用UTF-8编码格式转化成escape格式的字符串)
                            var param = "?token=" + data.data.token + "&name=" + encodeURI(encodeURI(data.data.name));
                            window.location.href = "success" + param
                        } else {
                            alert(data.message)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            encryptByPublicKey: function (val = '') {
                if (val === '') {
                    return '';
                }
                let encryptor = new JSEncrypt() // 新建JSEncrypt对象
                encryptor.setPublicKey(this.rsaPublicKey) // 设置公钥
                return encryptor.encrypt(val) // 对需要加密的数据进行加密
            },
        }
    });


</script>
</body>
